<template>
  <section class="footer">
    <div class="triangle"></div>

    <div class="px-8 py-8 lg:py-16 xl:py-32" style="background: var(--bg-color)">
      <div class="statement">
        <p class="zh">
          以上页面中的产品图片及屏幕内容仅作示意，实物产品效果（包括但不限于外观、颜色、尺寸）和屏幕显示内容（包括但不限于背景、UI、配图）可能略有差异，请以实物为准。
          以上页面中的数据为理论值，均来自内部实验室，于特定测试环境下所得（请见各项具体说明），实际使用中可能因产品个体差异使用条件和环境因素不同略有不同，请以实际使用的情况为准。
          由于产品批次和生产供应因素实时变化，为尽可能提供准确的产品信息、规格参数、产品特性，可能实时调整和修订以上页面中的文字表述、图片效果等内容，以求与实际产品性能、规格、指数、零部件等信息相匹配。
        </p>

        <p class="en mt-4 xl:mt-8">
          The product pictures and screen contents on the above page are only for indication. The effects of the
          physical products (including but not limited to appearance, color and size) and screen display contents
          (including but not limited to background, UI and illustration) may be slightly different. Please refer to the
          physical products. The data on the above page are theoretical values obtained from the internal laboratory
          under a specific test environment (please see the specific instructions). In actual use, it may be slightly
          different due to individual differences of the product and different use conditions and environmental factors.
          Please refer to the actual use. Due to the real-time changes of product batches and production and supply
          factors, in order to provide accurate product information, specification parameters and product
          characteristics as far as possible, text expression, picture effect and other contents in the above page may
          be adjusted and revised in real time to match the actual product performance, specification, index, parts and
          other information.
        </p>
      </div>
    </div>
  </section>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.footer {
  --bg-color: #222222;

  .triangle {
    width: 100%;
    height: 10vw;
    background: var(--bg-color);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }

  .statement {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 10px;
    text-indent: 2em;
    line-height: 1.6;
    font-family: MicrosoftYaHei;

    @media (min-width: 1024px) {
      font-size: 14px;
      line-height: 1.8;
    }

    @media (min-width: 1280px) {
      font-size: 18px;
      line-height: 2;
    }

    .zh {
      color: #e6e6e6;
      letter-spacing: 1px;
    }

    .en {
      color: #bababa;
    }
  }
}
</style>